<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>统计分析</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/fSelect.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>个人成绩对比</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-4">
                            <form id="form-personnel-add" class="form-horizontal">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">人员类别：</label>
                                            <div class="col-sm-8">
                                                <select name="personnelCategory" id="personnelCategory" onchange="getNames();" class="form-control m-b"
                                                         th:with="type=${@dict.getType('sys_examin_personnel_category')}">
                                                     <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                             th:value="${dict.dictValue}"></option>
                                                 </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">姓名：</label>
                                            <div class="col-sm-8">
                                                <!--<select name="personnelCategory" id="personnelCategory111" class="form-control m-b"
                                                        th:with="type=${@dict.getType('sys_examin_personnel_category')}">
                                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                            th:value="${dict.dictValue}"></option>
                                                </select>-->
                                                <select name="personName" id="personName" class="form-control m-b">

                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">考核时间：</label>
                                            <div class="col-sm-8">
                                                <select name="examTime" id="examTime" th:with="examineTimeList=${@recordService.selectExamineTimeList()}" class="form-control m-b">
                                                    <option value="">所有</option>
                                                    <option th:each="recordEntity : ${examineTimeList}" th:text="${recordEntity.examTime}" th:value="${recordEntity.examTime}"></option>
                                                </select>
                                            </div>
                                        </div>
                                        <!--<div class="form-group">
                                            <label class="col-sm-4 control-label">考核时间：</label>
                                            <div class="col-sm-8">
                                                <select name="examTime" th:with="examineTimeList=${@recordService.selectExamineTimeList()}" class="form-control m-b">
                                                    <option value="">所有</option>
                                                    <option th:each="recordEntity : ${examineTimeList}" th:text="${recordEntity.examTime}" th:value="${recordEntity.examTime}"></option>
                                                </select>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>
                            </form>
                            <div class="row">
                                <div class="col-sm-offset-7 col-sm-10">
                                    <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="searchGrcjdb()"><i class="fa fa-search"></i> 对比
                                    </button>&nbsp;
                                    <!--<button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置
                                    </button>-->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8" >
                            <div class="echarts" id="GRCJDB" style="height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>各类人员平均成绩对比</h5>
                    <div class="ibox-tools">
                        <label class="control-label">考核时间：</label>
                        <select name="glrycjdbExamTime" onchange="searchGlrycjdb();" style="width: 130px;height: 40px;margin-top: -14px;float: right;" id="glrycjdbExamTime" th:with="examineTimeList=${@recordService.selectExamineTimeList()}" class="form-control">
                            <option value="">所有</option>
                            <option th:each="recordEntity : ${examineTimeList}" th:text="${recordEntity.examTime}" th:value="${recordEntity.examTime}"></option>
                        </select>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="glrycjdb-chart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>整体成绩对比</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-k-chart" style="height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>单科成绩对比</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-4">
                                <form id="form-personnel-add" class="form-horizontal">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">人员类别：</label>
                                                <div class="col-sm-8">
                                                    <select name="dkcjdbPersonnelCategory" id="dkcjdbPersonnelCategory" onchange="getDkcjdbNames();" class="form-control m-b"
                                                            th:with="type=${@dict.getType('sys_examin_personnel_category')}">
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                                th:value="${dict.dictValue}"></option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">姓名：</label>
                                                <div class="container col-sm-8" id="dkcjDbPerson">
                                                    <!--<select name="personnelCategory" id="personnelCategory111" class="form-control m-b"
                                                            th:with="type=${@dict.getType('sys_examin_personnel_category')}">
                                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                                                th:value="${dict.dictValue}"></option>
                                                    </select>-->
                                                    <select name="dkcjdbPersonName" id="dkcjdbPersonName" class="demo" multiple="multiple">

                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">考核科目：</label>
                                                <div class="col-sm-8">
                                                    <select name="khkm" id="khkm" class="form-control m-b">
                                                        <option value="three_km_score">3000米跑</option>
                                                        <option value="horizontalbar_pushup_score">单杠/俯卧撑</option>
                                                        <option value="situp_score">仰卧起坐</option>
                                                        <option value="snake_run_score">30米×2蛇形跑</option>
                                                        <option value="bodily_form">体型</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="row">
                                    <div class="col-sm-offset-7 col-sm-10">
                                        <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="searchDkcjdb()"><i class="fa fa-search"></i> 对比
                                        </button>&nbsp;
                                        <!--<button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置
                                        </button>-->
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-8" id="grcjdbDiv">
                                <div class="echarts" id="DKCJDB" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
<script th:src="@{/js/plugins/echarts/theme/shine.js}"></script>
<script th:src="@{/js/fSelect.js}"></script>


<script type="text/javascript">
    var theme = "macarons";
    $(function () {
        getNames();
        searchGlrycjdb();
        searchZtjdb();
        getDkcjdbNames();
        searchDkcjdb();
    });

    function getNames(){
       var personnelCategory = $("#personnelCategory").val();
        //查询人员类别
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getAllPerson?personnelCategory="+personnelCategory,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
               var html = "";
               $.each(data,function (i,item) {
                   html += "<option value='"+item.examPersonnel+"'>"+item.examPersonnel+"</option>>"
               });
               $("#personName").html(html);
                searchGrcjdb();
            }
        });
    }

    //单科成绩对比
    function getDkcjdbNames(){
        var dkcjdbPersonnelCategory = $("#dkcjdbPersonnelCategory").val();
        var darr = new Array();
        //查询人员类别
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getAllPerson?personnelCategory="+dkcjdbPersonnelCategory,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
               // $('#dkcjdbPersonName').fSelect().destroy;
                $("#dkcjDbPerson").html('<select name="dkcjdbPersonName" id="dkcjdbPersonName" class="demo" multiple="multiple"></select>');
                var html = "";
                $.each(data,function (i,item) {
                    html += "<option selected value='"+item.examPersonnel+"'>"+item.examPersonnel+"</option>>";
                });
                $("#dkcjdbPersonName").html(html);
                $('#dkcjdbPersonName').fSelect();
                $('#dkcjdbPersonName').fSelect().reloadDropdownLabel;
                searchDkcjdb();
            }
        });
    }

    //单科成绩对比
    function searchDkcjdb(){
        //人员类别
        var dkcjdbPersonnelCategory = $("#dkcjdbPersonnelCategory").val();
        //姓名
        var dkcjdbPersonName = $("#dkcjdbPersonName").val();
        //考试科目
        var khkm = $("#khkm").val();
        if(dkcjdbPersonnelCategory == "" || dkcjdbPersonnelCategory == null){
            $.modal.alertWarning("请选择人员类别！");
            return;
        }
        if(dkcjdbPersonName == "" || dkcjdbPersonName == null){
            $.modal.alertWarning("请选择人员！");
            return;
        }
        if(khkm == "" || khkm == null){
            $.modal.alertWarning("请选择考核科目！");
            return;
        }

        var namePar = "";
        $.each(dkcjdbPersonName,function (i,item) {
            namePar += item + ",";
        });
        namePar = namePar.substring(0,namePar.length - 1);

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getDkcjdb",
            data: {
                "dkcjdbPersonnelCategory":dkcjdbPersonnelCategory,
                "dkcjdbPersonName":namePar,
                "khkm":khkm
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                console.log(data);
                initDkcjdb(data);
            }
        });


    }

    //个人成绩对比
    function searchGrcjdb(){
        //人员类别
        var personnelCategory = $("#personnelCategory").val();
        //人员姓名
        var personName = $("#personName").val();
        //考核时间
        var examTime = $("#examTime").val();
        if(personName == ""){
            $.modal.alertWarning("请选择人员！");
            return;
        }

        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getGradesByPersonnel",
            data: {
                "examPersonnel":personName,
                "examTime":examTime
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                initOption1(data);
            }
        });

    }

    //各类人员成绩对比
    function searchGlrycjdb(){
        //考核时间
        var examTime = $("#glrycjdbExamTime").val();
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getChartsDataForGlrycjdb",
            data: {
                "examTime":examTime
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                initGlrycjdb(data);
            }
        });

    }

    //整体成绩对比
    function searchZtjdb(){
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "examine/grade/getChartsDataForZtcjdb",
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                initZtcjdb(data);
            }
        });

    }

    //个人成绩对比
    function initOption1(mychartData){
        var myChart = echarts.init(document.getElementById("GRCJDB"),theme);
        var app = {};
        var option;

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };

        var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                }
            }
        };

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: ['体型', '3000米跑', '单杠/俯卧撑', '仰卧起坐','30米×2蛇形跑']
            },
            xAxis: [{
                type: 'category',
                axisTick: {show: false},
                data: mychartData.examTime
            }],
            yAxis: [{ type: 'value'}
            ],
            series: [
                {
                    name: '体型',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.bodilyForms
                },
                {
                    name: '3000米跑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.threeKmScore
                },
                {
                    name: '单杠/俯卧撑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.horizontalbarPushupScore
                },
                {
                    name: '仰卧起坐',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.situpScore
                },
                {
                    name: '30米×2蛇形跑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.snakeRunScore
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        $(window).resize(myChart.resize);
    }

    //各类人员对比
    function initGlrycjdb(mychartData){
        var myChart = echarts.init(document.getElementById("glrycjdb-chart"),theme);
        var app = {};
        var option;

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };

        var labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                }
            }
        };

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            legend: {
                data: ['体型合格率', '3000米跑', '单杠/俯卧撑', '仰卧起坐','30米×2蛇形跑']
            },
            xAxis: [{
                type: 'category',
                axisTick: {show: false},
                data: mychartData.ryfl
            }],
            yAxis: [{ type: 'value'}
            ],
            series: [
                {
                    name: '体型合格率',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.bodilyForms
                },
                {
                    name: '3000米跑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.threeKmScore
                },
                {
                    name: '单杠/俯卧撑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.horizontalbarPushupScore
                },
                {
                    name: '仰卧起坐',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.situpScore
                },
                {
                    name: '30米×2蛇形跑',
                    type: 'bar',
                    label: labelOption,
                    emphasis: {focus: 'series'},
                    data: mychartData.snakeRunScore
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        $(window).resize(myChart.resize);
    }

    //整体人员对比
    function initZtcjdb(mychartData){
        var kChart = echarts.init(document.getElementById("echarts-k-chart"),theme);
        var koption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['体型合格率', '3000米跑', '单杠/俯卧撑', '仰卧起坐','30米×2蛇形跑']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: mychartData.examTime
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [{
                startValue: '1000-01-01'
            }, {
                type: 'inside'
            }],
            series: [
                {
                    name: '体型合格率',
                    type: 'line',
                    data: mychartData.bodilyForms
                },
                {
                    name: '3000米跑',
                    type: 'line',
                    data: mychartData.threeKmScore
                },
                {
                    name: '单杠/俯卧撑',
                    type: 'line',
                    data: mychartData.horizontalbarPushupScore
                },
                {
                    name: '仰卧起坐',
                    type: 'line',
                    data: mychartData.situpScore
                },
                {
                    name: '30米×2蛇形跑',
                    type: 'line',
                    data: mychartData.snakeRunScore
                }
            ]
        };

        kChart.setOption(koption);
        $(window).resize(kChart.resize);
    }

    //单科成绩对比
    function initDkcjdb(mychartData){
        $("#grcjdbDiv").html('<div class="echarts" id="DKCJDB" style="height: 400px;"></div>');
        var kChart = echarts.init(document.getElementById("DKCJDB"),theme);
        var koption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: mychartData.dkcjdbPersonName
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: mychartData.times
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [{
                startValue: '1000-01-01'
            }, {
                type: 'inside'
            }],
            series: mychartData.series
        };

        kChart.setOption(koption);
        $(window).resize(kChart.resize);
    }
</script>
</body>
</html>
